import React, { Component } from 'react'
import './index.css'

export default class Footer extends Component {
    render() {
        const {todos,checkAll,clearAllDone} = this.props
        const doneCount = todos.filter(item=>item.done).length
        const total = todos.length
        return (
            <div className="todo-footer">
                <label>
                <input type="checkbox" checked={doneCount === total && total !== 0} onChange={({target:{checked}})=>{checkAll(checked)}}/>
                </label>
                <span>
                    <span>已完成 {doneCount}</span> / {total} 全部
                </span>
                <button className="btn btn-danger" onClick={clearAllDone} >清除已完成任务</button>
            </div>
        );
    }
}